<template>
	<svg width="450" height="50">
	    <symbol id ="maptitletext">
	    <text text-anchar="left" x="10px" y="20px" dy=".35em">
	    验证信息开启更多功能
	    </text>
	    </symbol>
	    <use xlink:href="#maptitletext" class="text animals"></use>
	    <use xlink:href="#maptitletext" class="text animals"></use>
	    <use xlink:href="#maptitletext" class="text animals"></use>
	</svg>
</template>

<script setup>
</script>

<style>
.text{
    stroke:#ffffff;
    fill:none;
    stroke-width:2;
    stroke-dasharray:0,300;
    stroke-dashoffset:0;
    font-size:2.2rem;
    font-family : "楷体",SansSerif,sans-serif;
}
.animals{}
.animals:nth-child(3n+1){
    stroke:#000000;
    animation:stroke1 3s cubic-bezier(0.4,0,0.2,1) forwards;
}
.animals:nth-child(3n+2){
    stroke:#ff5500;
    animation:stroke2 3s cubic-bezier(0.4,0,0.2,1) forwards;
}
.animals:nth-child(3n+3){
    stroke:#3d3d3d;
    animation:stroke3 3s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes stroke1{
    100%{
        stroke-dasharray:20,40;
        stroke-dashoffset:220;
    }
}
@keyframes stroke2{
    100%{
        stroke-dasharray:40,80;
        stroke-dashoffset:160;
    }
}
@keyframes stroke3{
    100%{
        stroke-dasharray:40,0;
        stroke-dashoffset:60;
    }
}
</style>
